<template>
	<view class="options-container">
		<view 
			v-for="(option, index) in truefalseOptions" 
			:key="index"
			class="option-item"
			:class="{
				'option-selected': userAnswer === option.value && !showAnswer,
				'option-correct': showAnswer && option.value === answer,
				'option-wrong': showAnswer && userAnswer === option.value && option.value !== answer
			}"
			@click="selectOption(option.value)"
		>
			<view class="option-icon">
				<text v-if="showAnswer && option.value === answer" class="icon-correct">✓</text>
				<text v-else-if="showAnswer && userAnswer === option.value && option.value !== answer" class="icon-wrong">✕</text>
				<text v-else>{{ option.label }}</text>
			</view>
			<text class="option-text">{{ option.text }}</text>
		</view>
	</view>
</template>

<script>
import { isAnswerCorrect } from '@/utils/answerValidator';
export default {
	props: {
		userAnswer: {
			type: String,
			default: ''
		},
		answer: {
			type: String,
			default: ''
		},
		showAnswer: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			truefalseOptions: [
				{ label: 'A', value: '正确', text: '正确' },
				{ label: 'B', value: '错误', text: '错误' }
			]
		}
	},
	methods: {
		selectOption(value) {
			if (this.showAnswer) return;
			this.$emit('update:userAnswer', value);
			this.$emit('select', value);
		}
	}
}
</script>

<style lang="scss" scoped>
.options-container {
	margin-top: 30rpx;
}

.option-item {
	display: flex;
	align-items: flex-start;
	padding: 24rpx 20rpx;
	border-radius: 8rpx;
	margin-bottom: 20rpx;
	background-color: #f8f8f8;
	border: 2rpx solid transparent;
	transition: all 0.3s;
	
	&.option-selected {
		background-color: #e6f2ff;
		border-color: #007aff;
	}
	
	&.option-correct {
		background-color: #e8f5e9;
		border-color: #4caf50;
	}
	
	&.option-wrong {
		background-color: #ffebee;
		border-color: #f44336;
	}
	
	.option-icon {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 20rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #666;
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
		
		.icon-correct {
			color: #4caf50;
		}
		
		.icon-wrong {
			color: #f44336;
		}
	}
	
	.option-text {
		flex: 1;
		font-size: 30rpx;
		color: #333;
		line-height: 1.5;
		padding-top: 6rpx;
	}
}
</style>